<template>
    <div class="attestation-from">
        <div class="content">
            <el-dialog
                title="编辑"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                <el-form :model="updateForm">
                    <el-form-item label="名字" :label-width="formLabelWidth">
                        <el-input
                            v-model="updateForm.username"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input
                            v-model="updateForm.nickname"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input
                            v-model="updateForm.email"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateUser()">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 模糊查询 -->
            <div class="likeform">
                <el-input
                    placeholder="请输入内容"
                    v-model="input3"
                    class="input-with-select"
                >
                    <template #append>
                        <el-button
                            @click="dimSearch"
                            icon="el-icon-search"
                        ></el-button>
                    </template>
                </el-input>
            </div>
            <!-- 表格 -->
            <el-table
                ref="multipleTable"
                :data="tables"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="id" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="realName" label="名字" width="180">
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="180">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="toggleSelection()">取消选择</el-button>
                <el-button @click="deleteOne">删除</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllUser, updateUser } from '@/api'

export default {
    name: 'attestation',
    inject: ['reload'],
    data() {
        return {
            tables: [],
            multipleSelection: [],
            formLabelWidth: '120px',
            dialogFormVisible: false,
            form: {},
            TdialogFormVisible: false,
            updateForm: {
                id: 0,
                password: '',
                username: '',
                nickname: '',
                phone: '',
                email: '',
                authority: 0,
                sex: '',
                userimg: '',
                attestation: '',
                myPost: 0,
                wishtime: 0,
                poor: '',
                oldwd: '',
            },
            id: 0,
            input3: '',
            dialogVisible: false,
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.array.forEach((element) => {
                    this.$refs.multipleTable.toggleSelection(element)
                })
            } else {
                this.$refs.multipleTable.clearSelection()
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
            console.log(this.multipleSelection)
        },
        deleteOne() {
        },
        getData() {
        },
        subAll() {
        },
        handleEdit(index, row) {
            console.log(index)
            console.log(row)
            this.id = row.empid
            this.dialogVisible = true
            this.updateForm = {
                id: row.id,
                password: '',
                username: '',
                nickname: '',
                phone: '',
                email: '',
                authority: 0,
                sex: '',
                userimg: '',
                attestation: '',
                myPost: 0,
                wishtime: 0,
                poor: '',
                oldwd: '',
            }
        },
        subUpdate() {
        },
        dimSearch() {
        },
        getAllUserData() {
            getAllUser().then(res => {
                console.log(res.data)
                this.tables = res.data
            })
        },
        updateUser() {
            this.dialogVisible = false
            console.log(this.updateForm.username)
            updateUser(this.updateForm).then(res => {
                console.log(res)
                this.$message({
                    type: 'success',
                    message: '修改成功',
                })
                this.getAllUserData()
            })
        },
    },
    beforeMount() {
        this.getAllUserData()
    },
    created() {
    },
}
</script>

<style>
.attestation-from{
    margin: 0px auto;
}
.content{
    width: 98%;
    margin: 0px auto;
}
.likeform{
    float: left;
    width: 50%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.addbtn{
    float: right;
    margin-right: 20px;
    margin-top: 10px;
}
</style>